Animation system

In the current Kanzi version the animation system that this topic describes applies only to the animations you create using the Kanzi Engine API. The old animation system is still available in the Kanzi Engine API, but is deprecated.

Kanzi state manager uses the same animation system internally. Future versions of Kanzi will use the same animation system for the animations you create in Kanzi Studio.

The Kanzi animation system consists animations and timelines:

• Animations define how to animate a property. For example, an animation defines how to animate a color from red to green, or a float value from 7 to 11. In Kanzi you can create these types of animations:
  • From-to animation defines from which to which value to change the value of a property. You can omit either of these values to animate either from the current value or to the current value of the property. From-to animations use an easing curve that defines the rate of change for the animation. You can use one of the easing curves that comes with Kanzi, or define your own.
  • Keyframe animation uses keyframes that define the property value and time at which the animation reaches that value. In Kanzi you can create linear, step, and Bézier spline keyframes.
• Timelines map the animations to time and to objects you want to animate. The animations themselves do not animate an object, the timelines do. In Kanzi you can create these types of timelines:
  • Property timeline applies an animation to a property of an object. For example, to change the layout size of an Image node, use the property timeline to animate the Layout Width and Layout Height properties of the node.
  • Property field timeline applies an animation to one or more fields of a property of an object. For example, you can use a separate animation for each color channel to change the color of the text in a Text Block node.
  • Parallel timeline allows you to group timelines which Kanzi plays at the same time. A parallel timeline ends when the animations in the last child timeline end. Use this timeline to organize collections of timelines and create a composition of timelines.

How the property timeline animations work

Property timeline uses the Kanzi property manager modifier stack. Kanzi applies the animation to the base value of the property, or the previous modifier in the stack (which can be another animation). That way you can stack animations that affect the same property.

When the animation ends it remains alive. The object describing the animation still exists so that the modifier can provide the property value when requested. When you use the Kanzi Engine API to apply multiple animations to an object you have to remove them, otherwise they keep consuming resources. Other systems, like the state manager and the Play Animation action, keep track of animations themselves, so that you do not need to.

The workflow of animating an object

To animate an object:

1. Create an animation:
   • For a from-to animation set from which to which value you want to animate a property, set the duration of the animation, and the easing curve.
   • For a keyframe animation populate the animation with keyframes that set the value of a property at the time when the animation must reach that value, and use either linear, step, or Bézier spline keyframe.
2. Create a timeline.
3. Assign the animation to the timeline.
4. Play back the animation.

See also

Creating animations and timelines using the Kanzi Engine API

Animations

Animations best practices

Kanzi fundamentals

Open topic with navigation